<template>
    <modal 
        :show='show'
        mode='bottom'
        :maskClose='false'
        closeButton
        @close='closeHandle'>
        <div class='component-cash-out-detail'>
            <div class="component-cash-out-detail__header">提现详情</div>
            <ul class="component-cash-out-detail__main">
                <li class="component-cash-out-detail__item">
                    <p class="key">提现金额</p>
                    <div class="value">
                        <p class='fee'>{{amount | toYuan}}元</p>
                    </div>
                </li>
                <li class="component-cash-out-detail__item">
                    <p class="key">手续费</p>
                    <div class="value">
                        <p class='money'>{{serviceFee | toYuan}}元</p>
                        <p class='tips'>按照提现金额1%收取，最低2.5元/笔<span class='offer-tag'>随机减</span></p>
                    </div>
                </li>
            </ul>
            <div class="component-cash-out-detail__footer">
                <span class="button auto" @click='finish'>预计到账金额 {{ (amount-serviceFee) | toYuan }}元</span>
            </div>
            <p class='component-cash-out-detail__tips'>到账时间以银行到账信息为准</p>
        </div>
    </modal>
</template>

<script>
    import { Promise } from 'es6-promise'
    import modal from './Modal.vue'
    import loading from './Loading.vue'
    import toYuan from '../filters/filter-toYuan'
    import bankCard from '../filters/filter-bankCard'
    import bindName from '../filters/filter-bindName'
    import  { mapGetters, mapActions }  from 'vuex'
    import { userApi } from '../api/api'

    export default {
        name:'cashOutDetail',
        components:{
            modal,
            loading
        },
        filters:{
            toYuan,
            bankCard,
            bindName
        },
        props: {
            show: {
                type: Boolean,
                default:false
            },
            amount:{
                type: [Number,String],
                default:''
            },
            type: {
                type: String,
                default:''
            },
            fee: {
                type: String,
                default:''
            },
        },
        data() {
            return {
                payType:0,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            userInfo(){
                return this.localInfo.userInfo
            },
            serviceFee(){
                if(this.payType == 1) return 0

                if(this.fee){
                    return this.fee
                }
                if(this.type == 'credit-report') return 0

                if(this.amount <= 25000) return 250
                else return this.amount / 100
                return 0
            },
            totalAmount(){
                return this.serviceFee + this.amount
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setUserInfo'
            ]),

            closeHandle(){
                this.$emit('close')
            },
            changePayType(){
                if(_.isEmpty(this.userInfo.bankcard)){
                    this.setMsgTip({
                        text:"未绑定银行卡",
                        type:'warn'
                    })
                    return
                }
                if(this.payType == 0){
                    this.payType = 1
                    return
                }
                if(this.payType == 1){
                    this.payType = 0
                }
            },
            goRouter(name){
                this.$router.push({
                    name:name
                })
            },
            goSetPassword(){
                alert(1)
                this.$router.push({
                    name:'user-password-set-transaction'
                })
            },
            closePassword(){
                this.$emit('close')
            },
            finish(){
                let payObject = {
                    totalAmount:this.totalAmount,
                    payType:this.payType
                }
                this.$emit('finish',payObject)
            },
            checkPassword(){
                let password = this.password
                userApi.checkTradePassword({
                    oldPassword:this.password
                })
                .then(result=>{
                    if(result.right){
                        this.status = 'success'
                        this.$emit('finish',password) 
                    }
                    else{
                        this.status = 'fail'
                        this.complete = false
                    }
                })
                .catch(error=>{
                    console.log(error)
                    this.status = 'fail'
                    this.complete = false
                })
            },
            getUserInfo(){
                /*if(!this.userInfo){
                    userApi.getInfo()
                    .then(result=> {
                        console.log(result)
                        if(_.isEmpty(result.bankcard)){
                            this.payType = 1
                        }
                        this.setUserInfo(result)
                    })
                    .catch(error=> {
                        console.log(error);
                    })
                }*/
                if(_.isEmpty(this.userInfo.bankcard)){
                    this.payType = 1
                }
            }
        },
        created(){
            this.getUserInfo()
        }
    }
</script>

<style lang="scss">
    @import "../sass/_variables";
    @import "../sass/_extends";
    @import "../sass/_mixins";

    .component-cash-out-detail__header{
        @extend %font-title;
        color:$importColor;
        padding-bottom: 16px;
        text-align: center;
    }
    .component-cash-out-detail__item{
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .key{
            @extend %font-subhead;
            color:$importColor;
        }
        .value{
            @extend %font-title;
            text-align: right;
            .fee{
                color:$orange;
            }
            .bank{
                @extend %font-subhead;
            }
            .people{
                @extend %font-caption;
            }
            .switch{
                @extend %font-caption;
                color:$orange;
            }
            .money{
                @extend %font-subhead;
                color:$orange;
            }
            .tips{
                @extend %font-caption;
            }
        }
    }
    .component-cash-out-detail__footer{
        display: flex;
        justify-content: flex-end;
    }
    .component-cash-out-detail__tips{
        @extend %font-caption;
        padding-top: 10px;
        font-size: 11px;
    }

</style>
